<!--
  -  您可以更改此项目但请不要删除作者署名谢谢，否则根据中华人民共和国版权法进行处理.
  -  You may change this item but please do not remove the author's signature,
  -  otherwise it will be dealt with according to the Copyright Law of the People's Republic of China.
  -
  -  yangbuyi Copyright (c) https://yby6.com 2024.
  -->

<template>
  <el-config-provider :locale="locale">

    <el-watermark class="watermark"
                  :content="config.content"
                  :font="config.font"
                  :gap="config.gap">
      <div class="app-container">
        <el-container>
          <!-- 公共头 -->
          <el-header>
            <AppHeader @changeLan="changeLan"/>
          </el-header>
          <el-container>
            <!-- /公共头 -->
            <router-view/>
          </el-container>
        </el-container>
      </div>
    </el-watermark>
  </el-config-provider>
</template>

<script setup name="App">
import AppHeader from "./components/AppHeader";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const { proxy } = getCurrentInstance();

const locale = ref(zhCn);

const config = reactive({
  content: [ '腾讯云社区领袖杨不易呀', '@yby6.com' ],
  font: {
    fontSize: 12
  },
  gap: [ 100, 80 ],
})

function changeLan(lan) {
  if (lan === "中文") {

    locale.value = zhCn;
    proxy.$i18n.locale = "zh-cn";
  }
  if (lan === "English") {
    locale.value = en;
    proxy.$i18n.locale = "en";
  }
}
</script>
<style lang="scss">
.app-container {


  .el-header {
    padding: 0 !important;
    height: auto !important;
  }
}


.container {
  margin: 0 auto;
}

@media screen and (max-width: 500px) {
  .container {
    width: auto;
    margin: 0 auto;
  }
}
</style>
